<template>
  <div class="report-chart" style="width: 100%; height: 100%;">
    <v-chart
      :option="chartOption"
      style="width: 100%; height: 100%;"
      autoresize
    />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart, LineChart, PieChart, ScatterChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

// 注册必要的组件
use([
  CanvasRenderer,
  BarChart,
  LineChart,
  PieChart,
  ScatterChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

const props = defineProps({
  config: {
    type: Object,
    required: true
  },
  data: {
    type: Array,
    default: () => []
  }
})

const chartOption = computed(() => {
  if (props.data.length === 0) return {}
  
  const chartType = props.config.chartType || 'bar'
  
  switch (chartType) {
    case 'bar':
      return getBarChartOption()
    case 'line':
      return getLineChartOption()
    case 'pie':
      return getPieChartOption()
    case 'scatter':
      return getScatterChartOption()
    default:
      return getBarChartOption()
  }
})

const getBarChartOption = () => {
  const categories = props.data.map(item => item.date || item.product || item.customer)
  const series = []
  
  // 根据数据动态生成系列
  const firstItem = props.data[0]
  Object.keys(firstItem).forEach(key => {
    if (key !== 'date' && key !== 'product' && key !== 'customer') {
      series.push({
        name: getFieldLabel(key),
        data: props.data.map(item => item[key] || 0)
      })
    }
  })
  
  return {
    title: {
      text: props.config.title || '柱状图',
      show: props.config.showTitle,
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: series.map(s => s.name),
      show: props.config.showLegend,
      bottom: 0
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: props.config.showLegend ? '15%' : '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: categories
    },
    yAxis: {
      type: 'value'
    },
    series: series.map(s => ({
      ...s,
      type: 'bar',
      itemStyle: {
        color: '#409EFF'
      }
    }))
  }
}

const getLineChartOption = () => {
  const categories = props.data.map(item => item.date || item.product || item.customer)
  const series = []
  
  const firstItem = props.data[0]
  Object.keys(firstItem).forEach(key => {
    if (key !== 'date' && key !== 'product' && key !== 'customer') {
      series.push({
        name: getFieldLabel(key),
        data: props.data.map(item => item[key] || 0)
      })
    }
  })
  
  return {
    title: {
      text: props.config.title || '折线图',
      show: props.config.showTitle,
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: series.map(s => s.name),
      show: props.config.showLegend,
      bottom: 0
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: props.config.showLegend ? '15%' : '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: categories
    },
    yAxis: {
      type: 'value'
    },
    series: series.map(s => ({
      ...s,
      type: 'line',
      smooth: true,
      itemStyle: {
        color: '#409EFF'
      }
    }))
  }
}

const getPieChartOption = () => {
  const series = []
  
  const firstItem = props.data[0]
  Object.keys(firstItem).forEach(key => {
    if (key !== 'date' && key !== 'product' && key !== 'customer') {
      series.push({
        name: getFieldLabel(key),
        data: props.data.map(item => ({
          name: item.date || item.product || item.customer,
          value: item[key] || 0
        }))
      })
    }
  })
  
  return {
    title: {
      text: props.config.title || '饼图',
      show: props.config.showTitle,
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      data: series[0]?.data?.map(item => item.name) || [],
      show: props.config.showLegend,
      bottom: 0
    },
    series: series.map(s => ({
      ...s,
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '50%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '18',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      }
    }))
  }
}

const getScatterChartOption = () => {
  const series = []
  
  const firstItem = props.data[0]
  Object.keys(firstItem).forEach(key => {
    if (key !== 'date' && key !== 'product' && key !== 'customer') {
      series.push({
        name: getFieldLabel(key),
        data: props.data.map(item => [item.date || item.product || item.customer, item[key] || 0])
      })
    }
  })
  
  return {
    title: {
      text: props.config.title || '散点图',
      show: props.config.showTitle,
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      data: series.map(s => s.name),
      show: props.config.showLegend,
      bottom: 0
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: props.config.showLegend ? '15%' : '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category'
    },
    yAxis: {
      type: 'value'
    },
    series: series.map(s => ({
      ...s,
      type: 'scatter',
      itemStyle: {
        color: '#409EFF'
      }
    }))
  }
}

const getFieldLabel = (key) => {
  const labelMap = {
    amount: '金额',
    quantity: '数量',
    stock: '库存',
    value: '价值'
  }
  return labelMap[key] || key
}
</script>

<style scoped>
.report-chart {
  padding: 8px;
  box-sizing: border-box;
}
</style>
